<template>
  <div class="payment-success">
    <r-header />
    <div class="success-container">
      <div class="success-icon">
        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M9 12L11 14L15 10M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" 
                stroke="#10B981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </div>
      
      <h1 class="success-title">支付成功！</h1>
      <p class="success-message">您的订单已成功支付，权益已更新到您的账户，感谢您的购买！</p>
      
      <div class="order-info">
        <div class="info-item">
          <span class="label">订单号：</span>
          <span class="value">{{ orderId }}</span>
        </div>
        <div class="info-item">
          <span class="label">支付金额：</span>
          <span class="value amount">¥{{ formattedAmount }}</span>
        </div>
        <div class="info-item">
          <span class="label">支付方式：</span>
          <span class="value">{{ paymentMethodText }}</span>
        </div>
        <div class="info-item">
          <span class="label">支付时间：</span>
          <span class="value">{{ paymentTime }}</span>
        </div>
      </div>
      
      <!-- 用户权益信息 -->
      <div class="benefit-info">
        <h3 class="benefit-title">您的权益信息</h3>
        <div class="benefit-item">
          <span class="benefit-label">剩余对话次数:</span>
          <span class="benefit-value">{{ $store.state.user.profile.totalChatCount || 0 }}</span>
        </div>
        <div class="benefit-item">
          <span class="benefit-label">剩余有效期:</span>
          <span class="benefit-value">{{ $store.state.user.profile.totalValidityDays || 0 }} 天</span>
        </div>
        <div class="benefit-item" v-if="$store.state.user.profile.expiresAt">
          <span class="benefit-label">到期时间:</span>
          <span class="benefit-value">{{ formattedExpiresAt }}</span>
        </div>
      </div>
      
      <div class="action-buttons">
        <router-link to="/shop" class="btn btn-secondary">
          继续购买
        </router-link>
        <router-link to="/my" class="btn btn-primary">
          返回主页
        </router-link>
      </div>
    </div>
  </div>
</template>

<script type="text/javascript">
export default {
  name: "PaymentSuccess",
  data() {
    return {
      orderId: '',
      amount: 0,
      paymentMethod: '',
      paymentTime: ''
    }
  },
  computed: {
    formattedAmount() {
      return this.amount ? parseFloat(this.amount).toFixed(2) : '0.00'
    },
    paymentMethodText() {
      const methodMap = {
        'wechat': '微信支付',
        'alipay': '支付宝'
      }
      return methodMap[this.paymentMethod] || '未知支付方式'
    },
    formattedExpiresAt() {
      const expiresAt = this.$store.state.user.profile.expiresAt;
      if (!expiresAt) return '';
      const date = new Date(expiresAt);
      return date.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
      });
    }
  },
  methods: {
    // 刷新用户权益信息
    async refreshUserBenefits() {
      try {
        // 优先使用数据库中的用户ID，如果没有则使用手机号
        const userId = this.$store.state.user.profile.id || this.$store.state.user.profile.phone_number;
        
        if (!userId) {
          console.error('用户ID不存在，无法刷新权益');
          return;
        }
        
        console.log('支付成功页面刷新用户权益，用户ID:', userId);
        
        const response = await fetch(`http://localhost:8088/api/user/${userId}/benefits`, {
          method: 'GET',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${this.$store.state.user.profile.token}`
          }
        });
        
        if (response.ok) {
          const data = await response.json();
          if (data.success) {
            console.log('支付成功页面用户权益刷新成功:', data.data);
            // 更新Vuex中的权益信息
            this.$store.commit('user/updateBenefit', data.data);
          } else {
            console.error('获取用户权益失败:', data.message);
          }
        } else {
          console.error('刷新用户权益失败:', response.status);
        }
      } catch (error) {
        console.error('刷新用户权益失败:', error);
      }
    }
  },
  mounted() {
    // 从路由参数获取支付信息
    const query = this.$route.query
    this.orderId = query.orderId || ''
    this.amount = parseFloat(query.amount) || 0
    this.paymentMethod = query.paymentMethod || ''
    this.paymentTime = new Date().toLocaleString()
    
    // 刷新用户权益信息
    this.refreshUserBenefits()
  }
}
</script>

<style lang="scss" scoped>
.payment-success {
  min-height: 100vh;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  padding: 2rem 1rem;
}

.success-container {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  padding: 3rem 2rem;
  background: rgba(31, 41, 55, 0.8);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.success-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 2rem;
  background: rgba(16, 185, 129, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  
  svg {
    width: 40px;
    height: 40px;
  }
}

.success-title {
  font-size: 2.5rem;
  font-weight: bold;
  color: #10B981;
  margin-bottom: 1rem;
}

.success-message {
  font-size: 1.2rem;
  color: #9CA3AF;
  margin-bottom: 3rem;
}

.order-info {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 15px;
  padding: 2rem;
  margin-bottom: 3rem;
  text-align: left;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  
  &:last-child {
    border-bottom: none;
  }
  
  .label {
    color: #9CA3AF;
    font-size: 1rem;
  }
  
  .value {
    color: #FFFFFF;
    font-weight: 600;
    font-size: 1rem;
    
    &.amount {
      color: #10B981;
      font-size: 1.2rem;
      font-weight: bold;
    }
  }
}

.action-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.btn {
  padding: 1rem 2rem;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.3s ease;
  min-width: 150px;
  
  &.btn-primary {
    background: linear-gradient(135deg, #3B82F6, #1D4ED8);
    color: white;
    
    &:hover {
      background: linear-gradient(135deg, #2563EB, #1E40AF);
      transform: translateY(-2px);
      box-shadow: 0 10px 20px rgba(59, 130, 246, 0.3);
    }
  }
  
  &.btn-secondary {
    background: rgba(107, 114, 128, 0.2);
    color: #9CA3AF;
    border: 1px solid rgba(107, 114, 128, 0.3);
    
    &:hover {
      background: rgba(107, 114, 128, 0.3);
      color: #FFFFFF;
      transform: translateY(-2px);
    }
  }
}

@media (max-width: 768px) {
  .success-container {
    padding: 2rem 1rem;
  }
  
  .success-title {
    font-size: 2rem;
  }
  
  .action-buttons {
    flex-direction: column;
  }
  
  .btn {
    width: 100%;
  }
}

/* 权益信息样式 */
.benefit-info {
  margin-top: 2rem;
  padding: 1.5rem;
  background: rgba(51, 65, 85, 0.3);
  border-radius: 12px;
  border: 1px solid rgba(59, 130, 246, 0.3);
  text-align: left;
}

.benefit-title {
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 1rem;
  text-align: center;
}

.benefit-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.8rem;
  font-size: 14px;
}

.benefit-item:last-child {
  margin-bottom: 0;
}

.benefit-label {
  color: #b3c6d9d6;
  font-weight: 500;
}

.benefit-value {
  color: #ffffff;
  font-weight: 600;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  padding: 0.3rem 0.8rem;
  border-radius: 6px;
  font-size: 13px;
}
</style>
